<template>
    <div>
     
        <NavBar :isArrow="false" :border="false" :fixed="true" :isFill="false" bgColor="#5756b3"
            left_title="雅品美妆" left_titleColor="#FFF" left_titleSize="18px"
        />
        <div class="header">
            <div class="m-l-15 m-r-15">
                <div class="h-50"></div>
                <input placeholder="搜索商品"/>
                <div class="m-t-20">
                    <Banner :bannerList="bannerList"/>
                </div>
            </div>
           
        </div>


    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import Banner from '@/components/Banner/index.vue'
    //name 为图片的名称 包含 图片后缀
    const getImageUrl = (name:string) => {
        return new URL(`../../assets/${name}`, import.meta.url).href;
    }
    const bannerList =[{
        imageUrl:'/images/home/banner.png',
        width:295,
        height:120
    },{
        imageUrl:'/images/home/banner.png',
        width:295,
        height:120
    }]

</script>
<style lang="scss" scoped>
.header{
    width: 100%;
    height: 180px;
    background: url(@/assets/images/home/header-bg.png) no-repeat;
    background-size: 100% 100%;
}
</style>